<template>
    <view class="page-container">
        <view class="page-head">
            <view class="page-head__top">
                <view class="activity-name">{{ info.subject }}</view>
                <view class="activity-type">{{ info.type.name }}</view>
            </view>
            <view class="page-head__body">
                <view class="flex-a-center mb4">
                    <view class="activity-date">{{ info.using_date }}</view>
                    <view class="activity-status" :class="{ status1: $countAcitivityStatus(info.using_date) === '进行中', status2: $countAcitivityStatus(info.using_date) === '已结束' }">{{
                        $countAcitivityStatus(info.using_date)
                    }}</view>
                </view>
                <view class="amount">红包余额：{{ filterPrice(info.balance) }}</view>
                <button class="btn-yellow btn-square btn-small withdraw-btn" @click="withdraw">提现</button>
                <button class="btn-yellow btn-square btn-small" @click="WithdrawRecord">提现记录</button>
            </view>
        </view>
        <tab ref="tab" around :list="tabData" :status="active" @changeTab="changeTab" />
        <view class="switch" v-if="active === 0">
            <view class="switch-item" v-for="(item, index) in panelList[active].child" :key="index">
                <view class="switch-left">
                    <view class="switch-title">{{ item.title }}</view>
                    <view class="switch-desc">{{ item.desc }}</view>
                </view>
                <switch :checked="checked(item)" @change="changeSwitch(item.key, $event)" />
            </view>
        </view>
        <template v-if="active === 1">
            <!-- <view class="grid">
                <view @click="gridActive = index" class="grid-item" :class="{ active: gridActive === index }" v-for="(item, index) in panelList[active].child" :key="index">
                    <view class="grid-value">{{ item.value }}</view>
                    <view class="grid-name">{{ item.name }}</view>
                    <view class="grid-sales" v-if="item.sales">({{ item.sales }}%)</view>
                </view>
            </view> -->
            <view class="list">
                <view class="list-item" v-for="(item, index) in list" :key="index">
                    <view class="list-name"><text class="label">礼物名称:</text>{{ item.content.name || "默认礼物" }}</view>
                    <view class="cell">
                        <view class="cell-item"><text class="label">售价:</text>{{ filterPrice(item.content.price || 0) }}</view>
                        <view class="cell-item sales"><text class="label">收益:</text>￥{{ filterPrice(item.amount) }} </view>
                    </view>
                    <view class="list-user"><text class="label">用户昵称:</text>{{ item.activity_user.nickname }}</view>
                </view>
            </view>
            <load-more :loadingType="loadingType" />
        </template>
        <withdrawPopup :info="info" ref="popup" @loadData="loadPageData" />
    </view>
</template>

<script>
import { mapGetters } from "vuex"
import withdrawPopup from "@/components/popup/withdraw"
export default {
    components: { withdrawPopup },
    data() {
        return {
            status: 0,
            formData: {
                gift_status: null,
                game_status: null,
                loc_status: null,
                review_status: null,
                phone_status: null,
                sys_gift_status: null,
                hongbao_status: null
            },
            active: 0,
            gridActive: 0,
            tabData: [
                {
                    name: "基础设置",
                    value: 0
                },
                {
                    name: "查看收益",
                    value: 1
                }
            ],
            panelList: [
                {
                    value: 0,
                    child: [
                        {
                            title: "礼物",
                            desc: "",
                            key: "gift_status"
                        },
                        {
                            title: "游戏",
                            desc: "",
                            key: "game_status"
                        },
                        {
                            title: "位置开关",
                            desc: "",
                            key: "loc_status"
                        },
                        {
                            title: "消息审核",
                            desc: "",
                            key: "review_status"
                        },
                        {
                            title: "获取手机号",
                            desc: "",
                            key: "phone_status"
                        },
                        {
                            title: "系统礼物",
                            desc: "",
                            key: "sys_gift_status"
                        },
                        {
                            title: "隐藏手机端红包口袋余额",
                            desc: "开启后手机端无法看到红包口袋余额",
                            key: "hongbao_status"
                        }
                    ]
                },
                {
                    value: 1,
                    child: [
                        {
                            name: "礼物收益",
                            value: 0,
                            sales: 40
                        },
                        {
                            name: "红包墙",
                            value: 0
                        },
                        {
                            name: "红包雨",
                            value: 0
                        },
                        {
                            name: "全屏特效",
                            value: 0,
                            sales: 40
                        },
                        {
                            name: "猜宝箱",
                            value: 0
                        },
                        {
                            name: "争分夺秒",
                            value: 0
                        }
                    ]
                }
            ],
            info: {
                type: {}
            },
            params: {
                page: 1,
                limit: 10,
                type: 0
            },
            loadingType: ""
        }
    },
    computed: {
        ...mapGetters(["userInfo"]),
        filterPrice() {
            return price => Number(((price ?? 0) / 100).toFixed(2))
        },
        checked() {
            return function (item) {
                return this.formData[item.key] === 1
            }
        }
    },
    onLoad(options) {
        this.active = Number(options.index)
        this.loadPageData()
        this.loadData()
    },
    methods: {
        changeTab(item) {
            this.active = item.value
        },
        async loadPageData() {
            let info = await this.$api.getActivityDetail(this.$pages().id)
            this.formData = {
                gift_status: info.gift_status,
                game_status: info.game_status,
                loc_status: info.loc_status,
                review_status: info.review_status,
                phone_status: info.phone_status,
                sys_gift_status: info.sys_gift_status,
                hongbao_status: info.hongbao_status
            }
            this.info = info
        },
        async loadData(type = "refresh") {
            try {
                if (type === "refresh") {
                    this.$showLoading("加载中")
                    this.params.page = 1
                } else if (this.loadingType === "nomore") return
                this.loadingType = "loading"
                let { list, total } = await this.$api.actMsgList(this.$pages().id, this.params)
                await this.$setTime(300)
                let loadingType = ""
                if (type === "refresh") {
                    this.list = list
                    uni.pageScrollTo({ scrollTop: 0, duration: 0 })
                    if (list.length === 0) loadingType = "nodata"
                    uni.hideLoading()
                } else {
                    this.list = this.list.concat(list)
                }
                if (this.list.length === total && total !== 0) {
                    loadingType = "nomore"
                }
                if (!loadingType) this.params.page++
                this.loadingType = loadingType
            } catch {
                this.loadingType = ""
            }
        },
        async changeSwitch(name, e) {
            const value = e.detail.value ? 1 : 0
            const obj = {}
            obj[name] = value
            await this.$api.setActivityStatus(this.info.id, obj)
            this.formData[name] = value
            this.$showToast("设置成功")
        },
        withdraw() {
            this.$refs.popup.open()
        },
        WithdrawRecord() {
            this.$navPage(`./withdrawRecord?id=${this.info.id}`)
        }
    },
    onReachBottom() {
        this.loadData("more")
    }
}
</script>

<style lang="scss" scoped>
.page-container {
    padding-bottom: 40rpx;
}
.page-head {
    background: #e06060;
    padding: 30rpx;
    &__top {
        display: flex;
        justify-content: space-between;
    }
    &__body {
        position: relative;
        margin: 30rpx 0;
    }
    .activity {
        &-name,
        &-type {
            font-size: 32rpx;
            color: #fff;
        }
        &-date {
            color: #fff;
            font-size: 26rpx;
            margin-right: 20rpx;
        }
        &-status {
            width: 90rpx;
            height: 40rpx;
            font-size: 26rpx;
            border-radius: 6rpx;
            text-align: center;
            line-height: 40rpx;
            font-size: 26rpx;
            border: 1px solid #ccc;
            color: #ccc;
            &.status1 {
                color: $blue-1;
                border-color: $blue-1;
            }
            &.status2 {
                color: $green;
                border-color: $green;
            }
        }
    }
    .amount {
        font-size: 36rpx;
        color: $yellow2;
    }
    .btn-yellow {
        position: absolute;
        right: 0;
        top: 0;
        color: #333;
    }
    .withdraw-btn {
        right: 200rpx;
    }
}
.switch {
    &-item {
        display: flex;
        position: relative;
        padding: 20rpx 30rpx;
        background: #fff;
        &:not(:last-child):after {
            @include _border;
        }
    }
    &-left {
        flex: 1;
        margin-right: 30rpx;
    }
    &-title {
        font-size: 32rpx;
        margin-bottom: 10rpx;
    }
    &-desc {
        font-size: 26rpx;
        color: #666;
    }
}
.grid {
    display: flex;
    flex-wrap: wrap;
    background: #f2f2f2;
    padding: 50rpx 10rpx;
    &-item {
        flex: 0 0 calc(33.3% - 40rpx);
        margin: 10rpx 20rpx;
        box-sizing: border-box;
        padding: 20rpx 30rpx;
        height: 180rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        background: #fff;
        color: #999;
        &.active {
            background: $red;
            color: #fff;
        }
    }
    &-name {
        margin-top: 10rpx;
    }
    &-name,
    &-value {
        font-size: 32rpx;
    }
    &-sales {
        font-size: 24rpx;
    }
}
.list {
    &-item {
        position: relative;
        background: #fff;
        padding: 20rpx 30rpx;
        color: #666;
        &:not(:last-child) {
            margin-bottom: 20rpx;
            &::after {
                @include _border;
            }
        }
    }
    .label {
        color: #999;
    }
    .cell {
        display: flex;
        margin: 16rpx 0;
        &-item {
            margin-right: 30rpx;
        }
    }
    &-user {
        font-size: 26rpx;
    }
    .sales {
        color: $red;
    }
    .send-btn {
        position: absolute;
        right: 20rpx;
        bottom: 20rpx;
    }
}
</style>
